<nz-modal [(nzVisible)]="formDialogDisplay"
          [nzKeyboard]="false"
          [nzTitle]="formTitle"
          [nzMask]="true"
          [nzMaskClosable]="false"
          (nzOnCancel)="closeDialog()"
          (nzOnOk)="onConfirmClick()"
          [nzOkLoading]="isOkLoading"
          [nzCancelDisabled]="isCancelDisabled"
          [nzClosable]="!isCancelDisabled"
>
    <ng-container *nzModalContent>
        <!--
            由于Angular使用的验证属性与HTML5规范使用的验证属性相同，因此这里向表单元素中添加novalidate属性，
            告诉浏览器不要使用原生验证功能（这些功能在不同的浏览器中的实现不一致，一般会带来麻烦）。
            由于Angular提供验证功能，因而不必使用浏览器自行实现的这些功能
         -->

        <form nz-form [formGroup]="dictTypeForm" novalidate>
            <nz-form-item>
                <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="dictTypeCode">字典类型编码</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24" nzHasFeedback nzValidatingTip="Validating..." [nzErrorTip]="dictTypeCodeErrorTpl">
                    <input id="dictTypeCode" type="text" nz-input autocomplete="off" formControlName="dictTypeCode" />
                    <ng-template #dictTypeCodeErrorTpl>
                        @if (dictTypeCode.dirty && dictTypeCode.errors?.['required']) {
                            请填写字典类型编码
                        }
                        @if (dictTypeCode.errors?.['msg']) {
                            {{dictTypeCode.errors?.['msg']}}
                        }
                    </ng-template>
                </nz-form-control>
            </nz-form-item>

            <nz-form-item>
                <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="dictTypeName">字典类型名称</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24" nzHasFeedback nzValidatingTip="验证中..." [nzErrorTip]="dictTypeNameErrorTpl">
                    <input id="dictTypeName" type="text" nz-input autocomplete="off" formControlName="dictTypeName">
                    <ng-template #dictTypeNameErrorTpl>
                        @if (dictTypeName.dirty && dictTypeName.errors?.['required']) {
                            请填写字典类型名称
                        }
                        @if (dictTypeName.errors?.['msg']) {
                            {{dictTypeName.errors?.['msg']}}
                        }
                    </ng-template>
                </nz-form-control>
            </nz-form-item>

            <nz-form-item>
                <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="enabled">启用状态</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24" nzHasFeedback nzValidatingTip="验证中...">
                    <nz-switch id="enabled" formControlName="enabled" nzSize="small"
                               nz-tooltip [nzTooltipTitle]="enabled.getRawValue() ? '已启用' : '已禁用'" nzTooltipPlacement="top"
                               [nzControl]="true" (click)="statusChange()"
                    >
                    </nz-switch>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="description">描述</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24" nzHasFeedback nzValidatingTip="验证中..." [nzErrorTip]="descriptionErrorTpl">
                    <textarea id="description" nz-input [rows]="3" [cols]="20" formControlName="description">
                    </textarea>
                    <ng-template #descriptionErrorTpl>
                        @if (descriptionFormControl.dirty && descriptionFormControl.errors?.['maxlength']) {
                            描述不能超过{{descriptionFormControl.errors?.['maxlength'].requiredLength}}个字
                        }
                    </ng-template>
                </nz-form-control>
            </nz-form-item>
        </form>
    </ng-container>
</nz-modal>
